import React, { useEffect, useState } from 'react';
import './coinFountain.scss';

interface Coin {
  id: number;
  x: number;
  y: number;
  vx: number;
  vy: number;
  rotation: number;
  rotationSpeed: number;
  scale: number;
  opacity: number;
}

const CoinFountain: React.FC<any> = (props) => {
  const { activeData } = props;
  const [coins, setCoins] = useState<Coin[]>([]);
  const [isActive, setIsActive] = useState(activeData);

  useEffect(() => {
    if (!isActive) return;

    let coinId = 0;
    let animationFrame: number;
    let spawnInterval: NodeJS.Timeout;
    let spawnRate = 20; // 初始喷射间隔(ms) - 减少间隔增加密度
    const maxSpawnRate = 80; // 最大喷射间隔(ms) - 减少最大间隔
    const spawnRateIncrease = 2; // 每次增加的间隔 - 减少增长幅度

    const spawnCoin = () => {
      const angle = (Math.random() - 0.5) * Math.PI * 1.5; // 扩大角度范围到 -135° to 135°
      const speed = 5 + Math.random() * 8; // 增大速度范围到 5-13

      const newCoin: Coin = {
        id: coinId++,
        x: window.innerWidth / 2, // 从屏幕中心开始
        y: window.innerHeight * 0.8, // 从屏幕下方80%位置开始
        vx: Math.sin(angle) * speed,
        vy: -Math.abs(Math.cos(angle)) * speed - 8, // 进一步增强向上喷射力度，提高喷射高度
        rotation: 0,
        rotationSpeed: (Math.random() - 0.5) * 10,
        scale: 0.8 + Math.random() * 0.4,
        opacity: 1
      };

      setCoins(prev => [...prev, newCoin]);
    };

    const updateCoins = () => {
      setCoins(prev => prev.map(coin => ({
        ...coin,
        x: coin.x + coin.vx,
        y: coin.y + coin.vy,
        vy: coin.vy + 0.2, // 重力效果
        rotation: coin.rotation + coin.rotationSpeed,
        opacity: Math.max(0, coin.opacity - 0.008) // 逐渐消失
      })).filter(coin =>
        coin.opacity > 0 &&
        coin.x > -100 && coin.x < window.innerWidth + 100 &&
        coin.y > -100 && coin.y < window.innerHeight + 100
      ));

      animationFrame = requestAnimationFrame(updateCoins);
    };

    // 开始喷射金币
    const startSpawning = () => {
      // 每次喷射生成3-5个金币
      const coinCount = 3 + Math.floor(Math.random() * 3);
      for (let i = 0; i < coinCount; i++) {
        spawnCoin();
      }
      spawnInterval = setTimeout(() => {
        if (spawnRate < maxSpawnRate) {
          spawnRate += spawnRateIncrease;
          startSpawning();
        }
      }, spawnRate);
    };

    startSpawning();
    updateCoins();

    // 3秒后停止喷射，隐藏所有金币
    const stopTimeout = setTimeout(() => {
      setIsActive(false);
      setCoins([]); // 立即隐藏所有金币
    }, 3000);

    return () => {
      clearTimeout(spawnInterval);
      clearTimeout(stopTimeout);
      cancelAnimationFrame(animationFrame);
    };
  }, [isActive]);

  // const startAnimation = () => {
  //   setCoins([]);
  //   setIsActive(true);
  // };

  // const resetAnimation = () => {
  //   setIsActive(false);
  //   setCoins([]);
  // };

  return (
    <div className="coin-fountain-container">
      <div className="fountain-base">
        {coins.map(coin => (
          <div
            key={coin.id}
            className="coin"
            style={{
              left: `${coin.x}px`,
              top: `${coin.y}px`,
              transform: `rotate(${coin.rotation}deg) scale(${coin.scale})`,
              opacity: coin.opacity
            }}
          >
            <img src={require("@/assets/img/gold-bg2.png")} alt="金币" />
          </div>
        ))}
      </div>


      {/* <div className="controls">
        <button
          onClick={startAnimation}
          disabled={isActive}
          className="start-btn"
        >
          {isActive ? '喷射中...' : '开始喷泉'}
        </button>
        <button
          onClick={resetAnimation}
          className="reset-btn"
        >
          重置
        </button>
      </div> */}
    </div>
  );
};

export default CoinFountain;